<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>图片管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="70" label-position="left" :model="search">
      <Button type="success" style="margin-right: 30px" @click="addModal = true">添加</Button>
      <FormItem label="图片名">
        <Input type="text" v-model="search.name" placeholder="请输入图片名检索"/>
      </FormItem>
      <FormItem label="图片类型">
        <Select v-model="search.imageType" clearable filterable placeholder="请选择图片类型检索">
          <Option v-for="v in imageType" :value="v.id" :key="v.id">{{ v.name }}</Option>
        </Select>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <div align="center">
      <viewer :images="data">
        <div v-for="v in data" class="image-item" :key="v.id">
          <img
            :src="v.link"
            :alt="v.name"
            :title="v.name"
            height="200px">
          <span class="type-text">{{ v.typeName }}</span>
          <span class="name-text">{{ v.name }}</span>
          <div class="item-but">
            <Button type="warning" @click="editImage(v)">修改</Button>
            <Button type="error" @click="delImage(v.id)">删除</Button>
          </div>
        </div>
      </viewer>
    </div>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
    <Modal
      v-model="modalShow"
      :title="addModal ? '添加图片' : editModal ? '修改图片' : '' + '灵异图片'"
      cancel-text="取消"
      class-name="center-modal"
      @on-visible-change="modalChange">
      <Form :model="form" :label-width="80" ref="modalForm" :rules="rules">
        <FormItem label="图片名" prop="name">
          <Input v-model="form.name" placeholder="请输入图片名"/>
        </FormItem>
        <FormItem label="图片类型" prop="imageType">
          <Select v-model="form.imageType" filterable placeholder="请选择图片类型">
            <Option v-for="v in imageType" :value="v.id" :key="v.id">{{ v.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="上传图片" prop="link">
          <Input v-model="form.link" style="display: none"/>
          <img v-show="!uploadShow" :src="form.link" width="100%" alt="">
          <Button v-show="!uploadShow" type="info" size="large" @click="reImage">重选选择</Button>
          <Upload
            v-show="uploadShow"
            ref="upload"
            type="drag"
            :format="['jpg','jpeg','png', 'gif']"
            :max-size="500 * 1024"
            :headers="{ 'Authentication-Token': this.getToken }"
            action="http://mayan50.cn:8080/manager/image/imageUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>单击或拖动文件上传</p>
            </div>
          </Upload>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="submit">{{ addModal ? '添加' : editModal ? '修改' : '' + '灵异' }}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.min.css'
import { allImageType } from '@/api/imageType'
import { addImage, delImage, delImageByPath, imageList, updateImage } from '@/api/image'
Vue.use(Viewer)
export default {
  name: 'Images',
  data: function () {
    return {
      data: [],
      addModal: false,
      editModal: false,
      uploadShow: true,
      imageType: [],
      form: {},
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '图片名不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 100,
            message: '图片名长度在1-100位之间',
            trigger: 'blur'
          }
        ],
        imageType: [
          {
            required: true,
            type: 'number',
            message: '请选择图片类型',
            trigger: 'blur'
          }
        ],
        link: [
          {
            required: true,
            type: 'string',
            message: '请上传图片',
            trigger: 'blur'
          }
        ]
      },
      total: 0,
      current: 1,
      pageSize: 10,
      search: {}
    }
  },
  mounted () {
    Viewer.setDefaults({
      Options: { inline: true, button: true, navbar: true, title: true, toolbar: true, tooltip: true, movable: true, zoomable: true, rotatable: true, scalable: true, transition: true, fullscreen: true, keyboard: true, url: 'data-source' }
    })
    allImageType().then(res => {
      this.imageType = res.data.list
    })
    this.getData()
  },
  computed: {
    modalShow: {
      get () {
        return this.addModal || this.editModal
      },
      set (val) {
        this.addModal = this.editModal = false
      }
    },
    getToken () {
      return sessionStorage.getItem('token')
    }
  },
  methods: {
    getData () {
      imageList(this.search, this.current, this.pageSize).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    modalChange (v) {
      if (!v) {
        this.$refs.modalForm.resetFields()
        this.uploadShow = true
        this.form = {}
      }
    },
    submit () {
      this.$refs.modalForm.validate((v) => {
        if (v) {
          if (this.addModal) {
            addImage(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.addModal = false
              }
            })
          }
          if (this.editModal) {
            this.form.updateTime = null
            updateImage(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.editModal = false
              }
            })
          }
        }
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    },
    uploadSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
        this.form.link = res.data.src
        this.form.fileUploadLogId = res.data.fileUploadLogId
        this.uploadShow = false
      } else {
        this.$Message.error(res.msg)
      }
      this.$refs.upload.clearFiles()
    },
    uploadError (error, file, fileList) {
      this.$Message.error(error)
    },
    reImage () {
      delImageByPath(this.form.link).then(res => {
        if (res.code === 200) this.$Message.success(res.msg)
      })
      this.uploadShow = true
      this.form.link = ''
    },
    editImage (obj) {
      this.form = { ...obj }
      this.uploadShow = false
      this.editModal = true
    },
    delImage (id) {
      this.$Modal.confirm({
        title: '删除提示',
        content: '是否确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          delImage(id).then(res => {
            if (res.code === 200) {
              this.getData()
              this.$Message.success(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
.image-item {
  display: inline-block;
  position: relative;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 50px;
  .type-text {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-but {
    text-align: right;
    button {
      margin-left: 10px;
      color: #FFFFFF;
    }
  }
}
</style>
